<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./taildwind.css"></script>
    <style></style>
  </head>
  <body>
    <div class="flex h-[50px] items-center justify-between bg-blue-200 px-3 text-black shadow-lg">
      <div class="flex h-full items-center gap-2 py-2">
        <img src="./logo.png" class="h-full" alt="" />
        <span class="mx-2 ml-4 cursor-pointer rounded-md px-2 py-1 text-sm duration-300 hover:bg-white">营销拓客</span>
        <span class="mx-2 cursor-pointer rounded-md px-2 py-1 text-sm duration-300 hover:bg-white">数据分析</span>
        <span class="mx-2 cursor-pointer rounded-md px-2 py-1 text-sm duration-300 hover:bg-white">产品管理</span>
      </div>
      <div class="group relative">
        <span class="cursor-pointer">欢迎，xxx</span>
        <div class="scale-0 absolute right-0 top-[100%] mt-1 rounded bg-white py-2 shadow-lg transition-all duration-300 group-hover:scale-100 origin-top-right">
          <div class="w-[100px] hover:bg-blue-200 px-3 duration-200 cursor-pointer py-1">子菜单1</div>
          <div class="w-[100px] hover:bg-blue-200 px-3 duration-200 cursor-pointer py-1">子菜单2</div>
          <div class="w-[100px] hover:bg-blue-200 px-3 duration-200 cursor-pointer py-1">子菜单3</div>
        </div>
      </div>
    </div>
  </body>
</html>
